.container1{
    margin: 22% auto;
    width: 210px;
    height: 140px;
    position: relative;
    perspective: 1000px;
    margin-bottom: -200px;
}
#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 3px #4940a2;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(380px);}
#carousel figure:nth-child(2) { transform: rotateY(45deg) translateZ(380px);}
#carousel figure:nth-child(3) { transform: rotateY(90deg) translateZ(380px);}
#carousel figure:nth-child(4) { transform: rotateY(135deg) translateZ(380px);}
#carousel figure:nth-child(5) { transform: rotateY(180deg) translateZ(380px);}
#carousel figure:nth-child(6) { transform: rotateY(225deg) translateZ(380px);}
#carousel figure:nth-child(7) { transform: rotateY(270deg) translateZ(380px);}
#carousel figure:nth-child(8) { transform: rotateY(315deg) translateZ(380px);}
/*#carousel figure:nth-child(9) { transform: rotateY(352deg) translateZ(320px);}*/
figure > img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
}
figure > img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1,1);
}

@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}